<template>
  <div class="layout-container-table boundTable">
    <CommonTable
      :data="state.tableData"
      v-model:page="page"
      :total="total"
      v-loading="loading"
      height="calc(100vh - 310px)"
      highlight-current-row
      @onQuery="onQuery"
    >
      <el-table-column prop="sampleName" label="名称" />
      <el-table-column prop="dytStyle" label="边界推算状态" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column label="详情">
        <template #default="scope">
          <el-button link size="small" @click="onLook(scope.$index, scope.row)"
            >文档链接</el-button
          >
        </template>
      </el-table-column>
    </CommonTable>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import CommonTable from "@/components/common-table/index.vue";
import { Page } from "@/components/common-table/type";
import { httpSampleData } from "@/api/testSampleData";
const state = reactive<any>({
  tableData: [],
});
const loading = ref<boolean>(false);
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);

onMounted(() => {
  onQuery({ pageNo: 1 });
});

// 查询数据
const onQuery = (val: any) => {
  const params = {
    sampleType: "1",
    pageSize: page.pageSize,
    pageNo: page.current,
    ...val,
  };
  // loading.value = true;
  httpSampleData(params).then((res) => {
    const result = res.data;
    loading.value = false;
    const { rows, totalRows } = result;
    total.value = totalRows;
    state.tableData = rows;
  });
};
</script>

<style lang="scss" scoped>
.boundTable {
  // padding: 16px;
}
</style>
